@@include('header.htm', {
  "title": "Pagination - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "pagination"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Pagination</h1>
	
	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "pagination"
	})
</div>

<div class="row">
	<div class="col-xl-6 ">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Default Pagination </h2>
			</div>

			<div class="card-body">
				<p class="pb-5"> Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. Read bootstrap documentation <a href="https://getbootstrap.com/docs/4.6/components/pagination/" target="_blank">More details</a>
				</p>

				<nav aria-label="Page navigation example">
					<ul class="pagination">
						<li class="page-item">
							<a class="page-link" href="#" aria-label="Previous">
								<span aria-hidden="true" class="mdi mdi-chevron-left"></span>
								<span class="sr-only">Previous</span>
							</a>
						</li>

						<li class="page-item active">
							<a class="page-link" href="#">1</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">2</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">3</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#" aria-label="Next">
								<span aria-hidden="true" class="mdi mdi-chevron-right"></span>
								<span class="sr-only">Next</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

	<div class="col-xl-6 ">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Flat Pagination </h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Flat Pagination add class  <code> .pagination-flat </code> to <code> &lt;div class="pagination"&gt; </code>
				</p>

				<nav aria-label="Page navigation example">
					<ul class="pagination pagination-flat ">
						<li class="page-item">
							<a class="page-link" href="#" aria-label="Previous">
								<span aria-hidden="true" class="mdi mdi-chevron-left"></span>
								<span class="sr-only">Previous</span>
							</a>
						</li>
						
						<li class="page-item ">
							<a class="page-link" href="#">1</a>
						</li>

						<li class="page-item active">
							<a class="page-link" href="#">2</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">3</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#" aria-label="Next">
								<span aria-hidden="true" class="mdi mdi-chevron-right"></span>
								<span class="sr-only">Next</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

	<div class="col-xl-6 ">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Separated Pagination</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Separated Pagination add class <code> .pagination-seperated </code> to <code> &lt;div class="pagination"&gt; </code>
				</p>

				<nav aria-label="Page navigation example">
					<ul class="pagination pagination-seperated">
						<li class="page-item">
							<a class="page-link" href="#" aria-label="Previous">
								<span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span> Prev
								<span class="sr-only">Previous</span>
							</a>
						</li>

						<li class="page-item active">
							<a class="page-link" href="#">1</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">2</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">3</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#" aria-label="Next">
								Next
								<span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>
								<span class="sr-only">Next</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

	<div class="col-xl-6 ">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Bordered Rounded</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Bordered Rounded Pagination add class <code> .border-rounded </code> to <code> &lt;div class="pagination"&gt; </code>
				</p>

				<nav aria-label="Page navigation example">
					<ul class="pagination border-rounded">
						<li class="page-item">
							<a class="page-link" href="#" aria-label="Previous">
								<span aria-hidden="true" class="mdi mdi-chevron-left"></span>
								<span class="sr-only">Previous</span>
							</a>
						</li>

						<li class="page-item active">
							<a class="page-link" href="#">1</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">2</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">3</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#" aria-label="Next">
								<span aria-hidden="true" class="mdi mdi-chevron-right"></span>
								<span class="sr-only">Next</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

	<div class="col-xl-6 ">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Flat Rounded Pagination</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Flat Rounded Pagination add class <code> .pagination-flat pagination-flat-rounded </code> to <code> &lt;div class="pagination"&gt; </code>
				</p>

				<nav aria-label="Page navigation example">
					<ul class="pagination pagination-flat pagination-flat-rounded">
						<li class="page-item">
							<a class="page-link" href="#" aria-label="Previous">
								<span aria-hidden="true" class="mdi mdi-chevron-left"></span>
								<span class="sr-only">Previous</span>
							</a>
						</li>

						<li class="page-item active">
							<a class="page-link" href="#">1</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">2</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">3</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#" aria-label="Next">
								<span aria-hidden="true" class="mdi mdi-chevron-right"></span>
								<span class="sr-only">Next</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>

	<div class="col-xl-6 ">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Seperated Rounded Pagination</h2>
			</div>

			<div class="card-body">
				<p class="mb-5"> For Seperated Rounded Pagination add class <code> .pagination-seperated pagination-seperated-rounded </code> to <code> &lt;div class="pagination"&gt; </code>
				</p>

				<nav aria-label="Page navigation example">
					<ul class="pagination pagination-seperated pagination-seperated-rounded">
						<li class="page-item">
							<a class="page-link" href="#" aria-label="Previous">
								<span aria-hidden="true" class="mdi mdi-chevron-left mr-1"></span> Prev
								<span class="sr-only">Previous</span>
							</a>
						</li>

						<li class="page-item active">
							<a class="page-link" href="#">1</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">2</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#">3</a>
						</li>

						<li class="page-item">
							<a class="page-link" href="#" aria-label="Next">
								Next
								<span aria-hidden="true" class="mdi mdi-chevron-right ml-1"></span>
								<span class="sr-only">Next</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
